<template>
  <div class="yxp-course">
    <TopBack :title="title" :courseId="id" :course_type="course_type" type="0"/>
    <div class="yxp-composition-main">
      <div class="composition-list" :class="{on: curIndex > -1}">
        <div class="composition-list-item" v-for="(item,i) in dataList" :key="item.id"   @click.stop="handleOpen(item,i)">
          <div class="title">
            <div class="title-l" :class="{on: item.isClosed < 2}">
              <span class="unit">{{item.title}}</span>
              <div class="unit-main">
                <span class="unit-main-name">体裁：{{item.theme}}</span>
                <span class="unit-main-name">话题：{{item.topic}}</span>
              </div>
            </div>
            <div class="title-r">
              <img  style="margin-top:2px;"  src="@/assets/composition/open-icon.png" v-if="!item.isHidden"/>
              <img  style="margin-top:10px;" src="@/assets/composition/hidden-icon.png" v-else />
            </div>
          </div>
          <div class="list" v-if="item.isHidden">
              <div class="list-item" v-for="(elem,k) in item.essay" :key="elem.id"  :class="{close: item.isClosed > 1 && k === 2, active: elem.num > 0}" @click.stop="getDetail(elem,item.isClosed,k)">
                <div class="list-item-l">
                  <span>{{elem.essay_title}}</span>
                </div>
                <div class="list-item-r">
                  <span class="star">
                    <img src="@/assets/composition/star-icon.png" v-for="(n,m) in elem.star" :key="'star' + m" />
                  </span>
                </div>
                <img src="@/assets/composition/com-one.png" class="complete" v-if="elem.num === 1" />
                  <img src="@/assets/composition/com-two.png" class="complete" v-if="elem.num === 2" />
                  <img src="@/assets/composition/com-three.png" class="complete" v-if="elem.num === 3"/>
                  <img src="@/assets/composition/com-four.png" class="complete" v-if="elem.num === 4" />
                  <img src="@/assets/composition/com-five.png" class="complete" v-if="elem.num > 4" />
                  <img src="@/assets/composition/closed.png" class="closed" v-if="item.isClosed > 1 && k === 2" />
              </div>
            </div>
        </div>
      </div>
      <!-- <div class="composition-double" v-else>
        <div class="composition-double-left">
            <div v-for="(item,i) in dataList" :key="item.id"   @click.stop="handleOpen(item,i)">
              <div class="composition-list-item composition-double-item"  v-if="i%2==0">
              <div class="title" :data-s="item.isClosed">
                <div class="title-l" :class="{on: item.isClosed < 2}">
                  <span class="unit">{{item.title}}</span>
                  <div class="unit-main">
                    <span class="unit-main-name">体裁：{{item.theme}}</span>
                    <span class="unit-main-name">话题：{{item.topic}}</span>
                  </div>
                </div>
                <div class="title-r">
                  <img style="margin-top:2px;" src="@/assets/composition/open-icon.png" v-if="!item.isHidden"/>
                  <img style="margin-top:10px;" src="@/assets/composition/hidden-icon.png" v-else />
                </div>
              </div>
              <div class="list" v-if="item.isHidden">
                  <div class="list-item" v-for="(elem,k) in item.essay" :key="elem.id"  :class="{close: item.isClosed > 1 && k === 2, active: elem.num > 0}" @click.stop="getDetail(elem,item.isClosed,k)">
                    <div class="list-item-l">
                      <span>{{elem.essay_title}}</span>
                    </div>
                   <div class="list-item-r">
                      <span class="star">
                        <img src="@/assets/composition/star-icon.png" v-for="(n,m) in elem.star" :key="'star' + m" />
                      </span>
                    </div>
                    <img src="@/assets/composition/com-one.png" class="complete" v-if="elem.num === 1" />
                      <img src="@/assets/composition/com-two.png" class="complete" v-if="elem.num === 2" />
                      <img src="@/assets/composition/com-three.png" class="complete" v-if="elem.num === 3"/>
                      <img src="@/assets/composition/com-four.png" class="complete" v-if="elem.num === 4" />
                      <img src="@/assets/composition/com-five.png" class="complete" v-if="elem.num > 4" />
                      <img src="@/assets/composition/closed.png" class="closed" v-if="item.isClosed > 1 && k === 2" />
                  </div>
                </div>
                </div>
            </div>
        </div> -->
        <!-- <div class="composition-double-right">
        <div v-for="(item,i) in dataList" :key="item.id"   @click.stop="handleOpen(item,i)">
          <div  class="composition-list-item composition-double-item"  v-if="i%2==1">
          <div class="title">
            <div class="title-l" :class="{on: item.isClosed < 2}">
              <span class="unit">{{item.title}}</span>
              <div class="unit-main">
                <span class="unit-main-name">体裁：{{item.theme}}</span>
                <span class="unit-main-name">话题：{{item.topic}}</span>
              </div>
            </div>
            <div class="title-r">
              <img  style="margin-top:2px;" src="@/assets/composition/open-icon.png" v-if="!item.isHidden"/>
              <img  style="margin-top:10px;" src="@/assets/composition/hidden-icon.png" v-else />
            </div>
          </div>
          <div class="list" v-if="item.isHidden">
              <div class="list-item" v-for="(elem,k) in item.essay" :key="elem.id"  :class="{close: item.isClosed > 1 && k === 2, active: elem.num > 0}" @click.stop="getDetail(elem,item.isClosed,k)">
                <div class="list-item-l">
                  <span>{{elem.essay_title}}</span>
                </div>
                <div class="list-item-r">
                  <span class="star">
                    <img src="@/assets/composition/star-icon.png" v-for="(n,m) in elem.star" :key="'star' + m" />
                  </span>
                </div>
                <img src="@/assets/composition/com-one.png" class="complete" v-if="elem.num === 1" />
                  <img src="@/assets/composition/com-two.png" class="complete" v-if="elem.num === 2" />
                  <img src="@/assets/composition/com-three.png" class="complete" v-if="elem.num === 3"/>
                  <img src="@/assets/composition/com-four.png" class="complete" v-if="elem.num === 4" />
                  <img src="@/assets/composition/com-five.png" class="complete" v-if="elem.num > 4" />
                  <img src="@/assets/composition/closed.png" class="closed" v-if="item.isClosed > 1 && k === 2" />
              </div>
            </div>
              </div>
        </div>
        </div> -->
      <!-- </div> -->
      <Empty v-if="isNone" />
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import TopBack from '../components/TopBack.vue'
import Empty from '@/components/Empty.vue'
import { essayList, essayDetail, checkEnd } from '@/services/composition.js'
import storage from '@/utils/storage.js'
import Timetips from '@/components/Timetips.vue'
export default {
  name: 'courseList',
  components: {
    TopBack,
    Empty,
    Timetips
  },
  data () {
    return {
      title: '写作模型',
      id: '',
      course_type: 0,
      dataList: [],
      isNone: false,
      curIndex: -1,
      isDouble: false
    }
  },
  created () {
    if (this.$route.query.id) {
      let { id } = this.$route.query
      this.id = +id
    }
    this.getEssayList()
    this.isDouble = this.getClientWidth()
  },
  mounted() {
    window.onresize = () => {
      if(this.isDouble != this.getClientWidth()) {
          this.isDouble = this.getClientWidth();
      }
    }
  },
  methods: {
    getClientWidth() {
      return document.body.clientWidth >= 1200 ? true : false;
    },
    handleOpen (item,i) {
      this.dataList.map((elem,index) => {
        if (i !== index) {
          elem.isHidden = false
        }
      })
      const obj = this.dataList[i]
      let isOpen = item.isHidden ? false : true
      this.curIndex = isOpen ? i : -1
      this.$set(obj, 'isHidden', isOpen)
    },
    async getEssayList () {
      let params = {
        curr_id: this.id
      }
      let data = await essayList(params)
      if (data.code === 1) {
        if (data.data.list.length === 0) {
          this.isNone = true
        }
        this.course_type = data.data.type
        data.data.list.map(item => {
          item.isHidden = false
          item.isClosed = 0
          item.essay.map((elem,i) => {
            if (i === 0 || i === 1) {
              if (elem.num === 0) {
                item.isClosed++
              }
            }
          })
        })
        this.dataList = data.data.list
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    async getDetail (item,num,index) {
      console.log(item)
      if (num > 1 && index == 2) {
        this.$toast('此篇还未解锁，请先学习模型一或模型二~')
        return
      }
      let params = {
        essay_id: item.id
      }
      let data = await essayDetail(params)
      if (data.code === 1) {
        this.getCheckEnd(item.id)
        storage.set('sceneData', data.data)
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    async getCheckEnd (id) {
      let params = {
        essay_id: id
      }
      let data = await checkEnd(params)
      if (data.code === 1) {
        let type = data.data
        switch(type) {
          case 0:
            this.$router.push({
              path: '/composition/sceneIndex',
              query: {
                courseId: this.id,
                id: id,
                course_type: this.course_type
              }
            })
            break;
          case 1:
            this.$router.push({
              path: '/composition/breakTrain',
              query: {
                courseId: this.id,
                id: id,
                course_type: this.course_type
              }
            })
            break;
          case 2:
            this.$router.push({
              path: '/composition/retell',
              query: {
                courseId: this.id,
                id: id,
                course_type: this.course_type
              }
            })
            break;
          case 3:
            this.$router.push({
              path: '/composition/spell',
              query: {
                courseId: this.id,
                id: id,
                course_type: this.course_type
              }
            })
            break;
          case 4:
            this.$router.push({
              path: '/composition/keepOut',
              query: {
                courseId: this.id,
                id: id,
                course_type: this.course_type
              }
            })
            break;
          case 5:
            this.$router.push({
              path: '/composition/enRead',
              query: {
                courseId: this.id,
                id: id,
                course_type: this.course_type
              }
            })
            break;
          case 6:
            this.$router.push({
              path: '/composition/uploadIndex',
              query: {
                courseId: this.id,
                id: id,
                course_type: this.course_type
              }
            })
            break;
          default:
            break;
        }
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang='less' scope>
.yxp-composition-main {
  .on {
    align-items: flex-start;
  }
  .composition-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 750px;
    &-item {
      width: 750px;
      background: #fff;
      border-radius: 10px;
      margin-bottom: 20px;
      padding: 35px 40px 40px;
      cursor: pointer;
      transition: box-shadow .3s;
      &:hover {
        box-shadow:0px 0px 10px rgba(39,191,163,0.5);
      }
      .on {
        color: #27BFA3 !important;
        .unit-main {
          color: #27BFA3 !important;
        }
      }
      .title {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        &-l {
          display: flex;
          font-size: 24px;
          font-family: Microsoft YaHei;
          color: #333333;
          text-align: left;
          .unit {
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            min-width: 96px;
            margin-right: 46px;
          }
          .unit-main {
            flex: 2;
            &-name {
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 31px;
              // color: #27BFA3;
            }
          }
        }
        &-r {
          cursor: pointer;
          width: 30px;
          height: 22px;
          vertical-align: middle;
          img {
            width: 22px;
            height: 22px;
            vertical-align: middle;
          }
        }
      }
      .list {
        text-align: left;
        margin-top: 54px;
        .complete {
              position: absolute;
              right: 0;
              top: 4px;
              width: 56px;
              height: 53px;
            }
        .active {
          border-color: #27BFA3;
          background:rgba(244,255,253,1);
          .list-item-l {
            span {
              color: #27BFA3;
            }
          }
        }
        .close {
          background: #F8F8F8;
          .list-item-l {
            span {
              color: #BFBFBF;
            }
          }
        }
        .closed {
          position: absolute;
          right: 22px;
          top: 22px;
          width: 13px;
          height: 16px;
        }
        &-item {
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60px;
          background: rgba(255,255,255,1);
          border:1px solid rgba(230,230,230,1);
          opacity: 1;
          border-radius: 6px;
          padding-left:30px;
          margin-bottom: 20px;
          &-l {
            display: flex;
            align-items: center;
            flex: 2;
             span {
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 26px;
              color: #333333;
            }
          }
          &-r {
            flex: 1;
          .star {
            white-space: nowrap;
            img {
              width: 22px;
              height: 20px;
              margin-right: 5px;
              vertical-align: top;
            }
          }
         }
        }
      }
    }
  }
}
// .composition-double {
//    display: flex;
//    justify-content: space-between;
//    &-left, &-right{
//     flex: 1;
//    }
//    &-item {
//     width: calc(100% - 40px) !important;
//   }
// }
</style>
